<template>
  <div id="table-detail">
    <Descriptions title="行程信息" layout="horizontal">
      <Item label="出发城市">{{tableData[0].author_dstation}}</Item>
      <Item label="到达城市">{{tableData[0].author_astation}}</Item>
      <Item label="出发日期">{{tableData[0].dDate}}</Item>
    </Descriptions>
    <Table
      :columns="columns"
      :data-source="tableData"
      bordered
      :scroll="{ x: 1050 }"
      :pagination="{
        hideOnSinglePage: true,
        defaultPageSize: 4,
        pageSizeOptions: ['2', '3', '4', '5'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total) => `共 ${total} 条`,
      }"
    ></Table>
  </div>
</template>

<script>
import { Table, Descriptions } from "ant-design-vue";
import { queryRailwayAllInfo } from "@/network/home.js";
const {Item} = Descriptions

export default {
  data() {
    return {
      tableData: [], //表格数据
      columns: [
        {
          title: "起始地址",
          dataIndex: "d_station",
          key: "1",
          fixed: "left",
          minwidth: 120,
        },
        {
          title: "到达地址",
          dataIndex: "a_station",
          key: "2",
          fixed: "left",
          minwidth: 120,
        },
        {
          title: "开始时间",
          dataIndex: "d_time",
          key: "3",
          minwidth: 120,
        },
        {
          title: "到达时间",
          dataIndex: "a_time",
          key: "4",
          minwidth: 120,
        },
        {
          title: "总耗时",
          dataIndex: "haoshi",
          key: "5",
          minwidth: 120,
        },
        {
          title: "车次",
          dataIndex: "checi",
          key: "6",
          minwidth: 120,
        },
        {
          title: "一等座",
          dataIndex: "first_ticket_status",
          key: "7",
          minwidth: 120,
        },
        {
          title: "一等价格",
          dataIndex: "first_ticket_price",
          key: "8",
          minwidth: 120,
        },
        {
          title: "二等座",
          dataIndex: "second_ticket_status",
          key: "9",
          minwidth: 120,
        },
        {
          title: "二等价格",
          dataIndex: "second_ticket_price",
          key: "10",
          minwidth: 120,
        },
        {
          title: "无座",
          dataIndex: "noseat_ticket_status",
          key: "11",
          minwidth: 120,
        },
        {
          title: "无座价格",
          dataIndex: "noseat_ticket_price",
          key: "12",
          minwidth: 120,
        },
      ],
    };
  },
  components: {
    Table,
    Descriptions,
    Item,
  },
  created() {
    this.queryRailwayAllInfo();
  },
  methods: {
    queryRailwayAllInfo() {
      queryRailwayAllInfo()
        .then((res) => {
          this.tableData = res.data;
          console.log('tableData',this.tableData);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
</style>